<template>
  <wc-waterfall :gap="curGap" :cols="curCols" class="waterfall">
    <div class="list_item" v-for="ltem in listData" :key="ltem.resId">
      <div class="item_content">
        <ImgVideoBox :content="contentHandle(ltem.content)"></ImgVideoBox>
        <div class="title">{{ ltem.title }}</div>
        <div class="gameCircle">{{ ltem.gameCircleName }}</div>
        <div class="litem_footer">
          <div class="f_left">
            <el-avatar :size="30" :src="ltem.userInfo.portrait" />
            <div class="nickname">{{ ltem.userInfo.nickname }}</div>
          </div>
          <div class="f_right">
            <img src="../../assets/赞.png" alt="">
            <div>{{ ltem.likeCount }}</div>
          </div>
        </div>
      </div>

    </div>
  </wc-waterfall>
</template>
<script setup lang="ts">
import 'wc-waterfall'
import { ref, watch, reactive } from 'vue';
import axios from 'axios';
import ImgVideoBox from './ImgVideoBox.vue';
import { useRoute } from 'vue-router'

// 根据宽度更改列数
let curGap = ref(10);
let curCols = ref(3);
const props = defineProps({
  pagesize: {
    width: Number
  }
})
watch(() => props.pagesize.width, (newWidth) => {
  if (newWidth < 600) {
    curCols.value = 2;
  } else if (newWidth < 900) {
    curCols.value = 3;
  } else {
    curCols.value = 4;
  }
}, { immediate: true });

// mock数据
const listData = reactive([])
const apiNum = ref(null);
const fetchMessageList = async (n: Number = 1) => {// 清空之前的数据
  try {
    if (n != apiNum.value && n < 6) {
      listData.length = 0; 
      const response = await axios.get(`/api/messageList/${n}`);
      listData.push(...response.data.list);
      apiNum.value = n;
    } else if ( n == 6 ) {
      const response = await axios.get(`/api/messageList/${Math.floor(Math.random() * 5) + 1}`);
      listData.push(...response.data.list);
    } else {
      fetchMessageList(Math.floor(Math.random() * 5) + 1);
    }
  } catch (error) {
    console.error(error);
  }
}
const route = useRoute()
fetchMessageList(route.query.page ? parseInt(route.query.page as string) : 1);

// content处理
const contentHandle = (content: string) => {
  let conObj = JSON.parse(content);
  let imgIndex = conObj.findIndex(item => item.blockType === 'img')
  let videoIndex = conObj.findIndex(item => item.blockType === 'video')
  if (imgIndex !== -1) {
    return {
      type: 'img',
      src: conObj[imgIndex].img.url,
    }
  } else if (videoIndex !== -1) {
    return {
      type: 'video',
      video: conObj[videoIndex].video.url,
      src: conObj[videoIndex].video.cover,
    }
  }
}
defineExpose({
  fetchMessageList
});
</script>
<style scoped lang="scss">
$color1: #808080;
.waterfall {
  .list_item {
    padding: 12px;
    background-color: white;
    .item_content {
      .title {
        font-size: 20px;
        max-height: 53px;
        overflow: hidden;
        margin-bottom: 22px;
      }
      .gameCircle {
        font-size: 12px;
        color: $color1;
        margin-bottom: 10px;
      }
      .litem_footer {
        width: 100%;
        display: flex;
        font-size: 14px;
        color: $color1;
        .f_left {
          display: flex;
          align-items: center;
          width: calc(100% - 50px);
          .nickname {
            margin-left: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .f_right {
          display: flex;
          justify-content: flex-end;
          width: 50px;
          line-height: 20px;
          align-items: center;
          img {
            width: 20px;
            height: 20px;
            margin-right: 5px;
          }
        }
      }
    }
  }
}
</style>
